<template>
  <div class="container bgc-black font-white">
    <div>
      <view-button :showExcleExport="false" @changeDate='changeDate' :today='true'></view-button>
    </div>
    <!-- 数据看板 -->
    <div class="data-panel-area">
      <data-panel></data-panel>
    </div>
    <!-- 数据可视化区域 -->
    <div>
      <echarts-line :analysisType="params.analysisType"></echarts-line>
    </div>
    <div class="align-c no-data-box mar-t-20" v-if="!echartData.length">
      <span class="font-20" style="color:#5E5E60">暂无数据</span>
      <img class="width-233 height-138" :src="noDataIcon" alt="" style="margin-top:66px">
    </div>
  </div>
</template>

 
<script>
import DataPanel from './components/DataPanel'
import EchartsLine from './components/EchartsLine'
import ViewButton from '../components/ViewButton.vue'
import { userAnalysis, statMemberAnalysis } from '@/api/data-analysis/data-analysis'
import noDataIcon from '@/assets/images/no-data.png'
export default {
  components: { DataPanel, EchartsLine, ViewButton },
  data() {
    return {
      params: {
        analysisType: 1, // 统计类型 1： 合计用户数 2：主播 3：店长 4：批发商
        endDate: '', // 结束时间
        enterpriseId: '', // 企业id
        startDate: '' // 开始时间,
      },
      echartData: [],
      noDataIcon
    }
  },
  mounted() {
    this.init()
    this.$bus.$on('getAnalysisType', (analysisType) => {
      this.params.analysisType = analysisType
      this.userAnalysis()
    })
  },
  methods: {
    init() {
      // 累计至今 （时间范围）
      // this.params.startDate = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 10), 'yyyy-MM-dd')} 00:00:00`
      // this.params.endDate = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate()), 'yyyy-MM-dd')} 23:59:59`
      this.params.startDate = ''
      this.params.endDate = ''
      // 企业Id
      this.params.enterpriseId = this.getEnterpriseId()
      this.userAnalysis()
      this.statMemberAnalysis()
    },
    // 初始化用户分析数据列表(数据图表)
    userAnalysis() {
      const data = this.params
      userAnalysis(data).then(response => {
        this.$bus.$emit('getEchartsData', response.data)
        this.echartData = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 初始化用户分析
    statMemberAnalysis() {
      const data = this.params
      statMemberAnalysis(data).then(response => {
        this.$bus.$emit('getPanelData', response.data)
      }).catch(err => {
        console.log(err)
      })
    },
    // 切换查询时间
    changeDate(startTime, endTime) {
      // this.params.analysisType = 1
      this.params.startDate = startTime
      this.params.endDate = endTime
      this.userAnalysis()
      this.statMemberAnalysis()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container {
    padding: 17px 24px;
    min-height: 100vh;
    .data-panel-area {
      margin-top: 36px;
    }
    .no-data-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) ,translateY(-50%);
    }
  }
</style>